<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

const title = ref<string>("");
const router = useRouter();

const handleSubmit = () => {
  const body = JSON.stringify({ title: title.value });
  fetch("/api", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body,
  }).then(() => {
    router.push("/");
  });
};
</script>
<template>
  <form class="flex flex-col gap-y-2" autocomplete="off" @submit.prevent="handleSubmit">
    <label class="bloc w-full flex flex-col gap-y-1">
      <div>标题</div>
      <input type="text" v-model="title" required placeholder="输入标题"
        class="block w-full border focus:outline-none px-3 py-2" />
    </label>

    <div>
      <button type="submit" class="border px-3 py-2 bg-blue-600 border-blue-700 text-white hover:bg-blue-700">
        提交
      </button>
    </div>
  </form>
</template>
